<script lang="ts" setup>
import { onMounted, ref } from "vue";
import service from "@/apis";
import Typings from "@/typings";
import { $confirm } from "@/utils/element";
import projectDialog from "./components/projectDialog.vue";

const treeData = ref<Typings.Project.props[]>([]);
const loading = ref<boolean>(false);
const projectRef = ref();

const controller = {
  async getTreeData() {
    try {
      loading.value = true;
      const { code, data } = await service.projectTreeApi();
      if (code === 0) {
        treeData.value = data;
      }
    } finally {
      loading.value = false;
    }
  },

  async handleProjectDetail(
    row: Partial<Typings.Project.props> = {},
    mode: Typings.Common.modeType = "view"
  ) {
    if (mode === "delete") {
      await $confirm({ tip: "确定要删除该数据吗" });
      await service.projectRemoveApi({ id: row.id });
      await controller.getTreeData();
      return;
    }

    if (["add", "update", "view"].includes(mode)) {
      await projectRef.value.open(row, mode);
      await controller.getTreeData();
    }
  },
};

onMounted(() => {
  controller.getTreeData();
});
</script>

<template>
  <div class="menu-container w-full h-full overflow-hidden flex flex-col">
    <div class="btn-container text-right">
      <el-button
        type="success"
        class="mb-[10px]"
        @click="controller.handleProjectDetail({}, 'add')"
        >添加项目</el-button
      >
    </div>
    <div class="table-container flex-1 h-0">
      <el-table
        height="100%"
        :data="treeData"
        row-key="id"
        border
        v-loading="loading"
      >
        <el-table-column prop="title" label="标题" align="center">
          <template #default="{ row }">
            <xt-button
              type="text"
              @click="controller.handleProjectDetail(row, 'view')"
            >
              {{ row.title }}
            </xt-button>
          </template>
        </el-table-column>
        <el-table-column prop="key" label="key值" align="center" />
        <!-- <el-table-column prop="path" label="路径" align="center" /> -->
        <el-table-column prop="createdTime" label="创建时间" align="center">
          <template #default="{ row }">
            {{ row.createdTime?.toTime() }}
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template #default="{ row }">
            <template v-if="!row.parentKey">
              <xt-link
                class="mx-[4px]"
                type="primary"
                @click="
                  controller.handleProjectDetail(
                    { parentKey: row.key, id: '' },
                    'add'
                  )
                "
              >
                新增系统
              </xt-link>

              <xt-link
                v-if="!row.children?.length"
                class="mx-[4px]"
                type="danger"
                @click="controller.handleProjectDetail(row, 'delete')"
              >
                删除
              </xt-link>
            </template>

            <template v-else>
              <xt-link
                class="mx-[4px]"
                type="primary"
                @click="controller.handleProjectDetail(row, 'update')"
              >
                编辑
              </xt-link>
              <xt-link
                class="mx-[4px]"
                type="danger"
                @click="controller.handleProjectDetail(row, 'delete')"
              >
                删除
              </xt-link>
            </template>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <projectDialog ref="projectRef" />
  </div>
</template>
